<!--
	ToDo:
	1. Should be able to drag and drop the .cbr and .cbz archives.
	2. The continuous down key press show take you to next page as well.
	3. The continuous up key press show take you to previous page as well.
	4. While using right or left nav keys to traverse the page, the comic strip 
	should also be intelligent to move itself accordingly.
	5. Enable / Disable the navigation keys depending on the position of the comic strip.
-->
<html>
    <head>
		<script type="text/javascript" src="../js-lib/jquery/core/jquery-1.6.2.js"></script>
		<script type="text/javascript" src="plugin/comic-viewer-plugin.js"></script>
		
		<link rel="stylesheet" type="text/css" href="style/style.css" />
    </head>
    <body>
		<div id="container">
			<div id="comic-options">
				<div id="gallery-icon" title="Hide Comic Strip. Press Esc. to close.">
					<div class="gallery-icon-row">
						<div class="gallery-icon-cell">&nbsp;</div>
						<div class="gallery-icon-cell">&nbsp;</div>
						<div class="gallery-icon-cell">&nbsp;</div>
					</div>
					<div class="gallery-icon-row">
						<div class="gallery-icon-cell">&nbsp;</div>
						<div class="gallery-icon-cell">&nbsp;</div>
						<div class="gallery-icon-cell">&nbsp;</div>
					</div>
					<div class="gallery-icon-row">
						<div class="gallery-icon-cell">&nbsp;</div>
						<div class="gallery-icon-cell">&nbsp;</div>
						<div class="gallery-icon-cell">&nbsp;</div>
					</div>
				</div>
			</div>
			
			<div id="comic-container">
				<div class="scroll floatLeft">
					<div id="leftIcon">&lt;</div>
				</div>
				<div id="comic-strip-container" class="floatLeft">
					<div id="comic-strip" style="padding-left: 2px;">
						<img src="comic/00.jpg" />
						<img src="comic/01.jpg" />
						<img src="comic/02.jpg" />
						<img src="comic/03.jpg" />
						<img src="comic/04.jpg" />
						<img src="comic/05.jpg" />
						<img src="comic/06.jpg" />
						<img src="comic/07.jpg" />
						<img src="comic/08.jpg" />
						<img src="comic/09.jpg" />
						<img src="comic/10.jpg" />
						<img src="comic/11.jpg" />
						<img src="comic/12.jpg" />
						<img src="comic/13.jpg" />
						<img src="comic/14.jpg" />
						<img src="comic/15.jpg" />
						<img src="comic/16.jpg" />
						<img src="comic/17.jpg" />
						<img src="comic/18.jpg" />
						<img src="comic/19.jpg" />
						<img src="comic/20.jpg" />
						<img src="comic/21.jpg" />
						
						<img src="comic/00.jpg" />
						<img src="comic/01.jpg" />
						<img src="comic/02.jpg" />
						<img src="comic/03.jpg" />
						<img src="comic/04.jpg" />
						<img src="comic/05.jpg" />
						<img src="comic/06.jpg" />
						<img src="comic/07.jpg" />
						<img src="comic/08.jpg" />
						<img src="comic/09.jpg" />
						<img src="comic/10.jpg" />
						<img src="comic/11.jpg" />
						<img src="comic/12.jpg" />
						<img src="comic/13.jpg" />
						<img src="comic/14.jpg" />
						<img src="comic/15.jpg" />
						<img src="comic/16.jpg" />
						<img src="comic/17.jpg" />
						<img src="comic/18.jpg" />
						<img src="comic/19.jpg" />
						<img src="comic/20.jpg" />
						<img src="comic/21.jpg" />
					</div>
				</div>
				<div class="scroll floatLeft">
					<div id="rightIcon">&gt;</div>
				</div>
			</div>
		</div>
		<div id="imageViewer">&nbsp;</div>
    </body>
	
	<script>
		$( document ).ready(function() {
			comicViewer.initialize();
			comicViewer.initializeImageViewer($( '#comic-strip > img:first' ));
		});
		$( window ).resize(function() {
			window.location.reload(true);
		});
	</script>
</html>